<template lang="">
    <div>
        <div class="container introDiv">
            <div class="row">
                <div class="title">
                    <div class="part-title">
                        <a>
                            <span>
                                <b-icon icon="x-diamond" aria-hidden="true"></b-icon>
                            </span>
                            <span class="part-title-span">介绍</span>
                            <p>
                                <span> Introduction</span>
                            </p>
                        </a>
                    </div>

                    <div class="part-title-span">
                        <div style="display: block;"><i class="fa fa-quote-left fa-3x fa-pull-left"></i> </div>

                        <p class="text-center">
                            通过SpringBoot后端开发技术与Vue前端开发框架为校内求职者和招聘单位提供一个信息管理平台，简化求职者投递简历以及招聘单位招揽人才的流程，为校内求职者和招聘单位提供一个可信任的兼职平台。

                            设计目的在于为在校大学生和校内用人单位提供可信任的平台，帮助大学生能够方便快捷且安全地寻找一份兼职来锻炼自身的综合能力，也为用人单位提供一个途径能够更加方便地招揽符合工作需求的员工。
                        </p>

                        <div> <i class="fa fa-quote-right fa-3x fa-pull-right"></i></div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 技术支持 -->
        <div class="container ">
            <div class="row">
                <div class="tech">
                    <div class="part-title">
                        <a>
                            <span>
                                <b-icon icon="gear-fill" aria-hidden="true"></b-icon>
                            </span>
                            <span class="part-title-span">技术支持</span>
                            <p>

                                <span> Technology</span>
                            </p>

                        </a>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-sm" v-for="(item,index) in techData" :key="index">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-img-top">
                                            <img :src="require(`@/assets/images/tech/${item.img}.png`)">
                                        </div>

                                        <h5 class="card-title">{{item.title}} </h5>

                                        <p class="card-text">{{item.introduction}} </p>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
        <!-- 新闻资讯 -->
        <div class="container">
            <div class="row">
                <div class="col-sm">
                    <b-list-group>
                        <b-list-group-item :href="`#/detail/${item.id}`" v-for="(item,i) in articleList" :key="i">
                            <a><span class="articleTitle">{{item.title}} </span></a>
                            <span class="articleTime">{{item.create_date}} </span>
                        </b-list-group-item>

                    </b-list-group>
                    <div class="pageDiv">
                        <el-pagination background layout="total,prev, pager, next" :total="total" :page-size="size"
                            :current-page="currentPage" @current-change="handlePage">
                        </el-pagination>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="calendarR">
                        <b-calendar width="400px" id="ex-disabled-readonly">
                        </b-calendar>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //技术支持展示
                techData: [{
                        img: "spring",
                        title: "SpringBoot",
                        introduction: "后端开发框架"
                    },
                    {
                        img: "mp",
                        title: "MyBatisPlus",
                        introduction: "数据库持久层框架"
                    },
                    {
                        img: "vue",
                        title: "Vue.js",
                        introduction: "前端开发框架"
                    },
                    {
                        img: "ele",
                        title: "ElementUI",
                        introduction: "前端UI组件库"
                    },
                ],

                articleList: [],
                pageSize: 2,
                size: 5,
                total: 10,
                currentPage: 1

            }
        },
        methods: {
            getArticleList(param) {
                this.postRequest("/front/article/query?currentPage=" + this.currentPage + "&size=" + this.size).then(
                    res => {
                        if (res) {
                            console.log(res, '文章');
                            this.articleList = res.data
                            this.pageSize = res.pages
                            this.total = res.total
                            console.log(this.pageSize, '===', this.total);
                        }
                    })
            },
            handlePage(page) {
                console.log(page);
                this.currentPage = page
                this.getArticleList()
            }
        },
        mounted() {
            this.getArticleList()
        },
    }
</script>
<style lang="scss" scoped>
    .introDiv {

        margin: 10px auto;

        .part-title {
            text-align: center;
            position: relative;



            .part-title-i {
                vertical-align: sub;
                font-size: 36px;
                color: #0086da;
                margin-right: 5px;
            }

            .part-title-span {
                font-size: 24px;
                padding-left: 1vw;

                p {
                    text-indent: 2em;
                }

            }

            p {
                font-size: 17px;
                color: #999;
                margin-top: -5px;


                span {
                    margin-left: 1vw;
                }
            }


        }

    }

    .container {
        margin-bottom: 1vw;
    }

    .tech {

        padding-top: 1vw;

        .part-all {
            width: 100%;
            margin-top: 20px;
        }

        .part-title {
            text-align: center;
            position: relative;

            .part-title-i {
                vertical-align: sub;
                font-size: 36px;
                color: #0086da;
                margin-right: 5px;
            }

            .part-title-span {
                font-size: 24px;
                padding-left: 1vw;
            }

            p {
                font-size: 17px;
                color: #999;
                margin-top: -5px;

                span {
                    margin-left: 1vw;
                }
            }

            img {
                width: 170px;
            }
        }

        .card {

            margin-bottom: 3vw;
            transition: all .5s;

            .card-body {
                box-shadow: 7px 6px 8px -1px rgba(0, 0, 0, 0.42);
                -webkit-box-shadow: 7px 6px 8px -1px rgba(0, 0, 0, 0.42);
                -moz-box-shadow: 7px 6px 8px -1px rgba(0, 0, 0, 0.42);
                text-align: center;

                .card-img-top {
                    margin-bottom: 5px;

                    img {
                        width: 90px;
                        height: 90px;
                    }
                }

                .card-text {
                    font-size: 14px;
                }

            }


        }

        .card:hover {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            transform: scale(1.1);
        }

    }

    .pageDiv {
        margin: 1vw 0;
        float: right;
    }

    .articleTitle:hover {
        color: #0086da;
    }

    .articleTime {
        font-size: 13px;
        color: #aaa;
        float: right;
        padding-top: 4px;
    }
</style>